<template>
  <div id="login">
    <div class="loginConbox">
      <div class="header">
        <!--<div class="logo">-->
        <!--<img src="../../assets/logo.png">-->
        <!--</div>-->
      </div>
      <div class="loginBox">
        <div class="loginCon">
          <p class="title">vue-xuadmin权限管理后台模板</p>
          <p class="title">前台: vue + element-ui</p>
          <el-card shadow="always" class="login-module" v-if="smdl">
            <div slot="header" class="clearfix formTitlt">
              <span>密码登录</span>
              <span class="titIconbox">
              <i class="iconfont xu-saomadenglu2 fa-lg iconcolor"></i>
              <i class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
            </div>
            <el-form :model="loginForm" status-icon label-width="100px" class="demo-ruleForm">
              <el-form-item>
                <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="请输入登录账号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="password" v-model="loginForm.password" auto-complete="off"
                          placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm">登录</el-button>
              </el-form-item>


            </el-form>
          </el-card>

          <el-card shadow="always" class="login-module" v-else>
            <div slot="header" class="clearfix formTitlt">
              <span>手机号登录</span>
              <span class="titIconbox">
              <i class="iconfont xu-mimadenglu1 fa-lg iconcolor"></i>
              <i class="iconfont xu-imagevector el-icon--right fa-lg pointer" @click="smdl = !smdl"></i>
            </span>
            </div>



            <el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
              <el-form-item prop="username">
                <el-input ref="phoneInput"  v-model="phone" placeholder="手机号码">
                  <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="param.password"  placeholder="验证码" style="width:180px">
                  <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
                </el-input>

                <el-button
                  style="width:140px;margin-left:5px;"
                  :disabled="codeSent"
                  @click="sendCode"
                >{{codeBtnText}}</el-button>
              </el-form-item>

              <div class="login-btn">
                <el-button type="primary" @click="submitSignUp()">登录</el-button>
              </div>
            </el-form>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from "axios"
  import Cookie from "js-cookie"
export default {

  data () {
    return {
      smdl: true,
      loginForm: {
        username: "",
        password: ""
      },
      phone: '',
      authcode: '',
      phoneRules: [v => !!v || '请输入手机号', v => (v && v.trim().length === 11) || '请输入正确的手机号'],
      authcodeRules: [v => !!v || '请输入短信验证码', v => (v && v.trim().length === 6) || '请输入正确的短信验证码'],
      codeSent: false,
      timeCount: 60,
      timer: null,
      codeBtnText: '获取短信验证码',
      snackbar: false,
      snackText: '',
      snackColor: 'error',
      snackTimeout: 3000,
      param: {
        username: '',
        password: '',
        phone: "",
        code: ""
      },
      rules: {
        // username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm () {
      let that = this
      if (this.loginForm.username === "" || this.loginForm.password === "") {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      }else{

        axios.get('http://localhost:8001/business/login',{
          params: {
            merchantAccount: this.loginForm.username,
            merchantPassword: this.loginForm.password
          }
        }).then( result => {
          console.log(result);
          if (result.data != "" && result.data != null){

            Cookie.set("merchant", result.data);
            // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
            that.$store.dispatch("setToken", that.loginForm.username).then(() => {
              that.$router.push({path: "/"})
            }).catch(res => {
              that.$message({
                showClose: true,
                message: res,
                type: "error"
              })
            })

          }else{
            this.$message({
              message: '您输入的帐号或者密码有误'
            });
          }
        })

      }
    },


    submitSignUp(){
      let that = this
      if (/^\d{6}$/.test(this.param.password)){

        axios.get('http://localhost:8001/business/signUp',{
          params: {
            value: this.phone,
            sms: this.param.password
          }
        }).then( result => {

          if (result.data.merchantId != 500){

            Cookie.set("merchant", result.data);
            // 将 username 设置为 token 存储在 store，仅为测试效果，实际存储 token 以后台返回为准
            that.$store.dispatch("setToken", that.phone).then(() => {
              that.$router.push({path: "/"})
            }).catch(res => {
              that.$message({
                showClose: true,
                message: res,
                type: "error"
              })
            })
          }else{
            this.$message({
              message: result.data.merchantAccount
            })
          }

        });

      }else{
        this.$message({
          message: '您的验证码输入有误'
        });
      }
    },

    sendCode () {
      if (!this.validatePhone()){
        this.$message.error('请输入正确手机号');
        return
      }
      this.codeSent = true
      this.countSecond()

      axios.get('http://localhost:8001/business/findPhone',{
        params: {
          value: this.phone
        }
      }).then( result => {
        if (result.data == "" || result.data == null){
          this.$message({
            message : '未查询到用户手机号'
          })
        }else{

          axios.get('http://localhost:8001/sign/send',{
            params: {
              value: this.phone
            }
          }).then( result => {

            if (result.data.userId == 200){

              this.$message({
                message: '短信已发送'
              });
            }else{
              this.$message({
                message: '发送失败'
              });
            }
          });

        }
      });

    },
    validatePhone () {
      this.$refs.phoneInput.focus()
      setTimeout(() => {
        this.$refs.phoneInput.blur()
      }, 0)

      return this.phoneRules.every(handler => {
        return handler.call(this, this.phone) === true
      })
    },
    countSecond () {
      if (this.timeCount <= 0) {
        this.resetCount()
        return
      }

      this.codeBtnText = `${this.timeCount}秒后可重发`
      this.timer = setTimeout(() => {
        this.timeCount--
        this.countSecond()
      }, 1000)
    },
    resetCount () {
      clearTimeout(this.timer)
      this.codeSent = false
      this.codeBtnText = `重新获取短信验证码`

      this.$nextTick(() => {
        this.timeCount = 60
      })
    },




  },
}
</script>
<style lang="scss">
  #login {
    width: 100%;
    height: 100%;
    background-color: #2d3a4b;
    .loginConbox{
      background: #2d3a4b;
    }
    .header {
      height: 60px;
      position: relative;
      background: #2d3a4b;
      /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
      .logo{
        margin-left: 30px;
        width: 500px;
        float: left;
        height: 40px;
        padding-top: 10px;
        img{
          height: 100%;
        }
      }
    }

    .loginBox {
      .iconcolor {
        color: #409EFF;
      }

      padding: 74px 0 118px;

      .loginCon {
        width: 990px;
        margin: auto;
        position: relative;
        height: 388px;

        .el-card__header {
          border-bottom: 0px;
        }
        .title{
          font-size: 36px;
          font-weight: 600;
          color: #ffffff;
          width: 500px;
          float: left;
          margin-top: 0px;
          &:first-child{
            font-size: 34px;
            margin-top: 50px;
            margin-bottom: 30px;
          }
        }
        .login-module {
          width: 380px;
          height: 325px;
          margin-top: 60px;
          border: none;
          position: absolute;
          right: 0;

          .formTitlt {
            font-size: 18px;
            font-weight: 400;

            .titIconbox {
              float: right;

              .pointer {
                cursor: pointer;
              }
            }
          }

          .smalltxt {
            text-align: right;

            .a {
              text-decoration: none;
              color: #999999;
              font-size: 12px;
              margin-left: 8px;
            }
          }
        }

        .el-form-item__content {
          margin-left: 0px !important;

          .subBtn {
            width: 100%;
          }
        }
      }

      .el-input__inner, .el-button, .el-card, .el-message {
        border-radius: 0px !important;
      }

      .el-form-item__content .ico {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 999;
        width: 40px;
        height: 39px;
        text-align: center;
        border-right: 1px solid #ccc;
      }

      .ewmbox {
        width: 100%;
        height: 240px;
        margin-top: -25px;

        .ewm {
          width: 140px;
          height: 140px;
          margin: 20px auto;

          p {
            font-size: 12px;
            padding-left: 40px;
            margin: 0;
          }
        }

        .ewmicon {
          width: 140px;
          margin: 20px auto 0;

          .iconfont {
            float: left;
          }

          p {
            font-size: 12px;
            padding-left: 40px;
            margin: 0;
          }
        }
      }
    }
  }
</style>
